<template>
  <div class="c-base-setting" :style="styles">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'rowForm',
  props: {
    model: {
      type: Object
    },
    height: {
      type: [Number, String]
    }
  },
  computed: {
    styles () {
      let attr = {}
      if (this.height) {
        const type = typeof this.height
        if (type === 'number') {
          attr = { height: `${this.height}px` }
        } else if (type === 'string') {
          attr = { height: this.height }
        }
      }
      return attr
    }
  },
  provide () {
    return {
      form: this
    }
  },
  data () {
    return {
      fields: []
    }
  },
  created () {
    this.$on('on-form-item-add', (field) => {
      if (field) this.fields.push(field)
      return false
    })
    this.$on('on-form-item-remove', (field) => {
      if (field.prop) this.fields.splice(this.fields.indexOf(field), 1)
      return false
    })
  }
}
</script>